<template>
  <div>
    <ma-form
        ref="formRef"
        v-model="from"
        :columns="columns"
        class="mt-7"
        @submit="submit"
    >
      <template #formButtons>
        <a-button type="primary" v-auth="['customers:customerAudit:auth']" status="success" @click="pass()" v-if="status == 2"> 审核通过</a-button>
        <a-button type="primary" v-auth="['customers:customerAudit:auth']" status="danger" @click="refuse()" v-if="status == 2 || status == 4"> 审核拒绝</a-button>
        <a-button type="primary" v-auth="['customers:customerAudit:save']" html-type="submit" v-if="status != 4" > 保存修改</a-button>
      </template>
    </ma-form>
  </div>
</template>

<script setup>
import {reactive, ref, inject} from 'vue'
import customerAudit from '@/api/customers/customerAudit.js'
import {Message} from '@arco-design/web-vue'
import {pinyin } from 'pinyin-pro'

const formRef = ref()
const record = inject('record')
const crudRef = inject('crudRef')
const from = ref(record.value.audit ? record.value.audit : {})
const status = ref(record.value.auth_status)
const submit = async (data) => {
  if (data) {
    let response;
    if (record.value.audit && record.value.audit.id > 0) {
      response = await customerAudit.update(record.value.audit.id, data)
    } else {
      data.customer_id = record.value.id
      response = await customerAudit.save(data)
      record.value.audit = {id:response.data.id}
    }
    if (!response.success) {
      return;
    }
    Message.success(response.message)
    status.value = '2'
    setDisabled(false)
    crudRef.value.refresh()
  }
}

const pass = async () => {
  let response = await customerAudit.pass(record.value.audit.id)
  if (!response.success) {
    return;
  }
  Message.success(response.message)
  status.value = response.data.status
  setDisabled(true)
  crudRef.value.refresh()
}
const refuse = async () => {
  let response = await customerAudit.refuse(record.value.audit.id)
  if (!response.success) {
    return;
  }
  Message.success(response.message)
  status.value = response.data.status
  setDisabled(false)
  crudRef.value.refresh()
}

const setDisabled = (type) =>{
  let list = formRef.value.getColumns()
  list.map(i=>{
    i.disabled = type
  })
}

const  convertToUpperCase = (str,form,key)=> {
  str = pinyin(str,{toneType: 'none'})
  let result = '';
  for (let i = 0; i < str.length; i++) {
    result += str[i].toUpperCase();
  }
  form.formModel.value[key] = result
}

const columns = reactive([
  {
    formType: 'grid-tailwind',
    colNumber: 1,
    customClass: ['width-70-margin-auto'],
    cols: [
      {
        formList: [
          {
            formType: 'card',
            title: '基本信息',
            forceShow:true,
            formList: [
              {
                title: "用户类型",
                dataIndex: "type",
                formType: "radio",
                 rules: [{ required: true, message: '请选择用户类型' }],
                dict: {
                  name: "userType",
                  props: {
                    label: "title",
                    value: "key"
                  },
                  translation: true
                },
                onControl: (val, maFormObject) => {
                  return {
                    card_name:{display: val == '2'},
                    card_number:{display: val == '2'},
                    company_name:{display: val == '1'},
                    business_license_number:{display: val == '1'},

                  }
                },
                disabled:status.value == '4'
              },
              {
                title: "公司名",
                dataIndex: "company_name",
                formType: "input",
                rules: [{ required: true, message: '请输入公司名' }],
                hide:true,
                disabled:status.value == '4'
              },
              {
                title: "姓名",
                dataIndex: "card_name",
                formType: "input",
                rules: [{ required: true, message: '请输入姓名' }],
                hide:true,
                disabled:status.value == '4'
              },
              {
                title: "身份证号",
                dataIndex: "card_number",
                formType: "input",
                rules: [{ required: true, message: '请输入身份证号' }],
                hide:true,
                disabled:status.value == '4'
              },
              {
                title: "营业执照号码",
                dataIndex: "business_license_number",
                formType: "input",
                rules: [{ required: true, message: '请输入营业执照号码' }],             
                hide:true,
                disabled:status.value == '4'
              },
              {
                title: "联系人",
                dataIndex: "contact",
                formType: "input",
                rules: [{ required: true, message: '请输入联系人' }],             
                disabled:status.value == '4'
              },
              {
                title: "联系人电话",
                dataIndex: "contact_phone",
                formType: "input",
                rules: [{ required: true, message: '请输入联系人电话' }],
                disabled:status.value == '4'
              },
              {
                title: "附件",
                dataIndex: "attachment",
                formType: "upload",
                 multiple: true,
                type: 'image',
                disabled:status.value == '4',
                multiple: true,
                // required: true,
              },
            ]
          }
        ]
      }
    ]
  },
  {
    formType: 'grid-tailwind',

    colNumber: 2,
    cols: [
      {
        formList: [
          {
            formType: 'card',
            title: '中文地址',
            forceShow:true,
            formList: [
              {
                title: "联系人",
                dataIndex: "chinese_contact",
                formType: "input",
                rules: [{ required: true, message: '请输入联系人' }],
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  convertToUpperCase(value,form,'english_contact')
                }
              },
              {
                title: "联系人电话",
                dataIndex: "chinese_phone",
                formType: "input",
                search: true,
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  form.formModel.value.english_phone = value
                }
              },
              {
                title: "地址",
                dataIndex: "chinese_address",
                formType: "input",
                rules: [{ required: true, message: '请输入地址' }],
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  convertToUpperCase(value,form,'english_address')
                }
              },
              {
                title: "城市",
                dataIndex: "chinese_city",
                formType: "input",
                rules: [{ required: true, message: '请输入城市' }],
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  convertToUpperCase(value,form,'english_city')
                }
              },
              {
                title: "州",
                dataIndex: "chinese_state",
                formType: "input",
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  convertToUpperCase(value,form,'english_state')
                }
              },
              {
                title: "国家",
                dataIndex: "chinese_country",
                dict: {
                  name: "countrys",
                },
                formType: "select",
                rules: [{ required: true, message: '请选择国家' }],
                disabled:status.value == '4',
                onChange:(value,form)=>{
                  form.formModel.value.english_country = value
                }
              },
              {
                title: "邮编",
                dataIndex: "chinese_zip_code",
                formType: "input",
                rules: [{ required: true, message: '请输入邮编' }],
                disabled:status.value == '4',
                onInput:(value,form)=>{
                  form.formModel.value.english_zip_code = value
                }
              },
            ]
          }
        ]
      },
      {
        formList: [
          {
            formType: 'card',
            title: '英文地址',
            forceShow:true,
            formList: [
              {
                title: "联系人",
                dataIndex: "english_contact",
                formType: "input",
                rules: [{ required: true, message: '请输入联系人' }],
                disabled:status.value == '4'
              },
              {
                title: "联系人电话",
                dataIndex: "english_phone",
                formType: "input",
                disabled:status.value == '4'
              },
              {
                title: "地址",
                dataIndex: "english_address",
                formType: "input",
                rules: [{ required: true, message: '请输入地址' }],
                disabled:status.value == '4'
              },
              {
                title: "城市",
                dataIndex: "english_city",
                formType: "input",
                rules: [{ required: true, message: '请输入城市' }],
                disabled:status.value == '4'
              },
              {
                title: "州",
                dataIndex: "english_state",
                formType: "input",
                disabled:status.value == '4'
              },
              {
                title: "国家",
                dataIndex: "english_country",
                formType: "select",
                dict: {
                  name: "countrys",
                },
                rules: [{ required: true, message: '请选择国家' }],
                disabled:status.value == '4'
              },
              {
                title: "邮编",
                dataIndex: "english_zip_code",
                formType: "input",
                rules: [{ required: true, message: '请输入邮编' }],
                disabled:status.value == '4'
              },
            ]
          }
        ]
      }
    ]
  },
])
</script>
<style>
.width-70-margin-auto {
  width: 70%;
  margin: auto;
}
</style>